<template>
    <div style="margin-top: 50px;">
        <!-- <PageTitle title="义工管理" :isSubpages="true" :subText="type == 2 ? '编辑义工' : '添加义工'" /> -->
        <div class="routerView">
            <el-form ref="form" :model="form" :rules="rules" label-width="150px" v-if="Object.keys(form).length">
                <el-row type="flex" justify="center">
                    <el-col :span="10">
                        <el-form-item label="中文姓名" prop="chineseName">
                            <el-input v-model="form.chineseName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="10">
                        <el-form-item label="英文姓名" prop="englishName">
                            <el-input v-model="form.englishName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="10">
                        <el-form-item label="出生日期" prop="birthdate">
                            <el-date-picker type="date" v-model="form.birthdate" style="width: 100%;"
                                value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="10">
                        <el-form-item label="whatsapp" prop="whatsapp">
                            <el-input v-model="form.whatsapp"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="10">
                        <el-form-item label="性别" prop="gender">
                            <el-radio-group v-model="form.gender">
                                <el-radio label="1">男</el-radio>
                                <el-radio label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="10"></el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="10">
                        <el-form-item label="联系电话" prop="mobile">
                            <el-input v-model="form.mobile"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="10">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="10">
                        <el-form-item label="通讯地址" prop="contactAddress">
                            <el-input v-model="form.contactAddress" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="10">
                        <el-form-item label="职业" prop="job">
                            <el-input v-model="form.job" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="10">
                        <el-form-item label="紧急联络人" prop="emergencyContact">
                            <el-input v-model="form.emergencyContact"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="10">
                        <el-form-item label="紧急联络人(电话)" prop="emergencyContactMobile">
                            <el-input v-model="form.emergencyContactMobile" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="center">
                    <el-col :span="22">
                        <el-form-item label="教育程度">
                            <el-radio-group v-model="form.education">
                                <el-radio label="1">硕士以上</el-radio>
                                <el-radio label="2">大学</el-radio>
                                <el-radio label="3">中学</el-radio>
                                <el-radio label="4">小学</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="22">
                        <el-form-item label="语言" prop="language">
                            <el-checkbox-group v-model="form.language">
                                <el-checkbox :label="1">粤语</el-checkbox>
                                <el-checkbox :label="2">English</el-checkbox>
                                <el-checkbox :label="3">普通話</el-checkbox>
                                <el-checkbox :label="4">其他</el-checkbox>
                                <el-input v-model="form.otherLanguage" 
                                    style="width: 200px;margin-left: 30px;"></el-input>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="22">
                        <el-form-item label="服务范畴">
                            <el-checkbox-group v-model="form.serve">
                                <el-checkbox :label="1">文书工作</el-checkbox>
                                <el-checkbox :label="2">咨询科技</el-checkbox>
                                <el-checkbox :label="3">活动服务</el-checkbox>
                                <el-checkbox :label="4">个人关顾</el-checkbox>
                                <el-checkbox :label="5">导师</el-checkbox>
                                <el-checkbox :label="6">电子书制作</el-checkbox>
                                <el-checkbox :label="7">其他</el-checkbox>
                                <el-input v-model="form.otherServe" 
                                    style="width: 200px;margin-left: 30px;"></el-input>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row type="flex" justify="center">
                    <el-col :span="22">
                        <el-form-item label="预计参与服务时间" label-width="150px">
                            <el-checkbox v-model="form.confirmServeTime">不确定时间</el-checkbox>
                            <div class="flex-box">
                                <div class="flex-1 text-center">{{ ' ' }}</div>
                                <div class="flex-1 text-center">星期一</div>
                                <div class="flex-1 text-center">星期二</div>
                                <div class="flex-1 text-center">星期三</div>
                                <div class="flex-1 text-center">星期四</div>
                                <div class="flex-1 text-center">星期五</div>
                                <div class="flex-1 text-center">星期六</div>
                                <div class="flex-1 text-center">星期天</div>
                            </div>
                            <div class="flex-box">
                                <div class="flex-1 text-center">早</div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.mon.morn"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.tue.morn"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.wed.morn"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.thu.morn"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.fri.morn"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.sat.morn"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.sun.morn"></el-checkbox>
                                </div>
                            </div>
                            <div class="flex-box">
                                <div class="flex-1 text-center">中</div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.mon.noon"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.tue.noon"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.wed.noon"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.thu.noon"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.fri.noon"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.sat.noon"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.sun.noon"></el-checkbox>
                                </div>
                            </div>
                            <div class="flex-box">
                                <div class="flex-1 text-center">晚</div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.mon.night"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.tue.night"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.wed.night"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.thu.night"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.fri.night"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.sat.night"></el-checkbox>
                                </div>
                                <div class="flex-1 text-center">
                                    <el-checkbox v-model="form.serveTime.sun.night"></el-checkbox>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-button type="primary" @click="onSubmit" style="width:150px;margin:30px 0">保存</el-button>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
  
<script>
import { listVolunteer, getVolunteer, delVolunteer, addVolunteer, updateVolunteer } from "@/api/fund/volunteer";
export default {
    data() {
        const validateEng = (rule, value, callback) => {
            let reg = /^([a-zA-Z ]+|[\u4e00-\u9fa5]+)$/
            if (value == '') {
                callback(new Error('请输入英文名称'))
            } else if (!reg.test(value)) {
                callback(new Error('请输入英文'))
            } else {
                callback()
            }
        }
        return {
            type: 1,
            form: {},
            rules: {
                // chineseName: [
                //     { required: true, message: "中文名不能为空", trigger: "blur" }
                // ],
                // englishName: [
                //     { required: true, message: '请输入英文姓名', trigger: 'blur' },
                //     { validator: validateEng, trigger: 'blur' }
                // ],
                // birthdate: [
                //     { required: true, message: "出生日期不能为空", trigger: "blur" }
                // ],
                // whatsapp: [
                //     { required: true, message: "whatsapp不能为空", trigger: "blur" }
                // ],
                // job: [
                //     { required: true, message: "职业不能为空", trigger: "blur" }
                // ],
                // email: [
                //     { required: true, message: "邮箱不能为空", trigger: "blur" }
                // ],
                // gender: [
                //     { required: true, message: "性别不能为空", trigger: "blur" }
                // ],
                // mobile: [
                //     { required: true, message: "手机号不能为空", trigger: "blur" }
                // ],
                // contactAddress: [
                //     { required: true, message: "通讯地址不能为空", trigger: "blur" }
                // ],
                // education: [
                //     { required: true, message: "学历不能为空", trigger: "blur" }
                // ],
                // serve: [
                //     { required: true, message: "服务范围不能为空", trigger: "blur" }
                // ],
                // otherServe: [
                //     { required: true, message: "其他服务不能为空", trigger: "blur" }
                // ],
                // confirmServeTime: [
                //     { required: true, message: "不确定时间不能为空", trigger: "blur" }
                // ],
                // serveTime: [
                //     { required: true, message: "服务时间不能为空", trigger: "blur" }
                // ],
                // // language: [
                // //     { required: true, message: "语言不能为空", trigger: "blur" }
                // // ],
                // emergencyContact: [
                //     { required: true, message: "紧急联络人不能为空", trigger: "blur" }
                // ],
                // emergencyContactMobile: [
                //     { required: true, message: "紧急联络人电话不能为空", trigger: "blur" }
                // ],
                // status: [
                //     { required: true, message: "状态不能为空", trigger: "change" }
                // ],
            }
        }
    },
    mounted() {
        this.type = this.$route.query.type;
        if (this.type == 1) {
            this.reset()
        } else {
            const id = this.$route.query.id
            getVolunteer(id).then(response => {
                response.data.serve = JSON.parse(response.data.serve)
                response.data.language = JSON.parse(response.data.language)
                response.data.confirmServeTime = response.data.confirmServeTime == "0" ? false : true
                const dataServeTime = JSON.parse(response.data.serveTime)
                for (let key in dataServeTime) {
                    let itemArr = dataServeTime[key].split(',')
                    dataServeTime[key] = {
                        morn: itemArr.indexOf('morn') >= 0,
                        noon: itemArr.indexOf('noon') >= 0,
                        night: itemArr.indexOf('night') >= 0
                    }
                }
                response.data.serveTime = dataServeTime || {}
                this.form = response.data;
            });
        }
    },
    methods: {
        reset() {
            this.form = {
                id: null,
                chineseName: null,
                englishName: null,
                birthdate: null,
                whatsapp: null,
                gender: null,
                mobile: null,
                contactAddress: null,
                education: null,
                serve: [],
                otherServe: null,
                confirmServeTime: false,
                language: [],
                otherlemnoene: null,
                emergencyContact: null,
                emergencyContactMobile: null,
                status: null,
                ctime: null,
                createBy: null,
                mtime: null,
                updateBy: null,
                serveTime: {
                    mon: {
                        morn: false,
                        noon: false,
                        night: false
                    },
                    tue: {
                        morn: false,
                        noon: false,
                        night: false
                    },
                    wed: {
                        morn: false,
                        noon: false,
                        night: false
                    },
                    thu: {
                        morn: false,
                        noon: false,
                        night: false
                    },
                    fri: {
                        morn: false,
                        noon: false,
                        night: false
                    },
                    sat: {
                        morn: false,
                        noon: false,
                        night: false
                    },
                    sun: {
                        morn: false,
                        noon: false,
                        night: false
                    }
                },
            }
        },
        toJump() {
            let that = this
            this.$confirm('此操作将返回上一页并且当前页面内容不会保存, 是否保存当前填写内容?', '提示', {
                confirmButtonText: '保存',
                cancelButtonText: '返回上一页',
                type: 'warning',
                showClose: false,
                closeOnClickModal: false
            }).then(() => {
                if (that.type == 1) {
                    that.onSubmit()
                } else {
                    that.onEdit()
                }
            }).catch(() => {
                this.$router.push({
                    path: "/volunteers"
                });
            });
        },
        onSubmit() {
            let that = this
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    let paramsForm = JSON.parse(JSON.stringify(this.form))
                    if (paramsForm.language == 4 && !paramsForm.otherLanguage) return this.$modal.msgError("请输入其他语言种类");
                    if (paramsForm.serve == 7 && !paramsForm.otherServe) return this.$modal.msgError("请输入其他服务范畴");
                    paramsForm.serve = JSON.stringify(paramsForm.serve)
                    paramsForm.language = JSON.stringify(paramsForm.language)
                    paramsForm.confirmServeTime = paramsForm.confirmServeTime == false ? '0' : '1'
                    for (let key in paramsForm.serveTime) {
                        let arr = []
                        for (let children in paramsForm.serveTime[key]) {
                            if (paramsForm.serveTime[key][children]) {
                                arr.push(children)
                            }
                        }
                        paramsForm.serveTime[key] = arr.join(',')
                    }
                    paramsForm.serveTime = JSON.stringify(paramsForm.serveTime) || ''

                    if (paramsForm.id) {
                        updateVolunteer(paramsForm).then(response => {
                            this.$modal.msgSuccess("修改成功");
                        });
                        this.reset();
                        setTimeout(() => {
                            that.$router.push({
                                path: "/fund/volunteer"
                            });
                        }, 500);
                    } else {
                        addVolunteer(paramsForm).then(response => {
                            this.$modal.msgSuccess("新增成功");
                        });
                        this.reset();
                        setTimeout(() => {
                            that.$router.push({
                                path: "/fund/volunteer"
                            });
                        }, 500);
                    }

                } else {
                    this.$message({
                        showClose: true,
                        message: '很抱歉，您的信息填写不完整，请补全',
                        type: 'warning'
                    });
                    return false;
                }
            });
        },
    }
}
</script>
  
<style lang="scss" scoped>
.flex-box {
    display: flex;
    justify-content: space-around;
}

.flex-1 {
    flex: 1;
}
</style>